<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
        @media screen and (orientation:portrait){
            .cirBtn {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #42b983;
        color: #fff;
        border: none;
        cursor: pointer;
        font-size: 24px;
      }


     

      .button-2 {
              background-color: rgba(51, 51, 51, 0.05);
              border-radius: 8px;
              border-width: 0;
              color: #333333;
              cursor: pointer;
              display: inline-block;
              font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
              font-size: 16px;
              font-weight: 500;
              line-height: 20px;
              list-style: none;
              margin: 8px;
              padding: 10px 12px;
              text-align: center;
              transition: all 200ms;
              vertical-align: baseline;
              white-space: nowrap;
              user-select: none;
              -webkit-user-select: none;
              touch-action: manipulation;
            }
          


      .button-4 {
              appearance: none;
              background-color: #FAFBFC;
              border: 1px solid rgba(27, 31, 35, 0.15);
              border-radius: 6px;
              box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
              box-sizing: border-box;
              color: #24292E;
              cursor: pointer;
              display: inline-block;
              font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
              font-size: 18px;
              font-weight: 500;
              line-height: 20px;
              list-style: none;
              padding: 6px 16px;
              position: relative;
              transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
              user-select: none;
              -webkit-user-select: none;
              touch-action: manipulation;
              vertical-align: middle;
              white-space: nowrap;
              word-wrap: break-word;
            }


      .container {
        margin-top:24px;
        display: flex;
        flex-direction: row;
        width:100%
      }

      .mb {
        margin-bottom: -12px
      }

      .ml {
        margin-left:-12px
      }

      .mr {
        margin-right:-12px
      }

      .mt {
        margin-top:-12px
      }

      .pl {
        padding-left:16px;
      }

    }

/* 横屏，手机水平方向导航*/
@media screen and (orientation:landscape){
  
    .cirBtn {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: #42b983;
        color: #fff;
        border: none;
        cursor: pointer;
        font-size: 32px;
      }


      .btn {
        width: 100px;
        height: 40px;        
        background-color: #DCDCDC;
        color: #333;
        border: 1;
        cursor: pointer;
      }

      .button-2 {
              background-color: rgba(51, 51, 51, 0.05);
              border-radius: 8px;
              border-width: 0;
              color: #333333;
              cursor: pointer;
              display: inline-block;
              font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
              font-size: 16px;
              font-weight: 500;
              line-height: 20px;
              list-style: none;
              margin: 8px;
              padding: 10px 12px;
              text-align: center;
              transition: all 200ms;
              vertical-align: baseline;
              white-space: nowrap;
              user-select: none;
              -webkit-user-select: none;
              touch-action: manipulation;
            }
          


      .button-4 {
              appearance: none;
              background-color: #FAFBFC;
              border: 1px solid rgba(27, 31, 35, 0.15);
              border-radius: 6px;
              box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
              box-sizing: border-box;
              color: #24292E;
              cursor: pointer;
              display: inline-block;
              font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
              font-size: 20px;
              font-weight: 500;
              line-height: 20px;
              list-style: none;
              padding: 16px 16px;
              position: relative;
              transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
              user-select: none;
              -webkit-user-select: none;
              touch-action: manipulation;
              vertical-align: middle;
              white-space: nowrap;
              word-wrap: break-word;
            }


      .container {
        margin-top:24px;
        display: flex;
        flex-direction: row;
        width:100%
      }

      .mb {
        margin-bottom:-16px
      }

      .ml {
        margin-left:-16px
      }

      .mr {
        margin-right:-16px
      }

      .mt {
        margin-top:-16px
      }

      .pl {
        padding-left:32px;
      }

}

      .content {
        flex: 1;
      }

      .block{
        position: absolute;
        margin-top:4px;
        right: 8px;

        }

        * {  
        -webkit-touch-callout:none;  
        -webkit-user-select:none;  
        -khtml-user-select:none;  
        -moz-user-select:none;  
        -ms-user-select:none;  
        user-select:none;  
        }
        
        input {      
         -webkit-user-select:auto; /*webkit浏览器*/     
        } 


    </style>
    <script src="./ws.js"></script>
    <script>
       window.addEventListener('contextmenu', function(e){  
          e.preventDefault();  
       })

      //console.log("server:", serverIp);

    </script>
  </head>

  <body>
    <div style=" position: relative;">
        <div class="block">
          <span id="link">
            <font color="#dc143c">未连接</font>
          </span> 
          <button onclick="init()">连接</button>
        </div>
        <h3>家游鸭--手机操控板</h3>
   
    </div>
    <hr>

    <div class="container">
        <div class="content pl" >
            <div>
            <button class="button-4" onclick="enter()">确定</button>
            <button class="button-4" onclick="cancel" style="padding-left:16px">取消</button>
            </div>
            <div style="margin-top:24px">
                <button class="button-2" onclick="sendKey('kb:1')">1</button>
                <button class="button-2" onclick="sendKey('kb:2')">2</button>
                <button class="button-2" onclick="sendKey('kb:3')">3</button>
                <button class="button-2" onclick="sendKey('kb:4')">4</button>
                <button class="button-2" onclick="sendKey('kb:5')">5</button>
            </div>
         </div>  
      <div class="content">
        
        <table>
            <tr>
                <td></td>
                <td><button class="cirBtn mb" onclick="up()">上</button></td>
                <td></td>
        </tr>
        <tr>
            <td><button class="cirBtn mr" onclick="left()">左</button></td>
            <td></td>
            <td><button class="cirBtn ml" onclick="right()">右</button></td>
        </tr>
        <tr>
            <td></td>
             <td><button class="cirBtn mt" onclick="down()">下</button></td>
            <td></td>
         </tr>
        </table>   
      </div>
      
        
  </div>

    </div>
  </body>
</html>
